<template>
  <div class="tuancan">
    <div class="shang">
      <span class="iconfont icon-fanhui" @click="tuantui()"></span>
      <p>“团餐”膳食饮食活动</p>
      <div class="tou">
        <span class="iconfont icon-dian"></span>
        <div class="zhongjian"></div>
        <span class="iconfont icon-shuangyuanquan"></span>
      </div>
    </div>
    <div class="tupian">
      <img src="http://n.sinaimg.cn/sinacn21/290/w640h450/20180319/40ea-fyskeuc3864163.jpg" alt />
      <div :class="flag?'yiqing':'yiqings'">
        <p>温馨提示：受疫情的影响快递可能稍延迟到达，谢谢支持!</p>
      </div>
    </div>
    <div class="shipu">
      <div class="shipushang">
        <div class="shipushangs">
          <div class="shipushangleft">
            <p>推荐</p>
            <h1>{{data.name}}</h1>
            <h1 class="yuan">￥{{data.price}}元</h1>
          </div>
          <div class="shipushangright">
            <img :src="data.src" alt />
          </div>
        </div>
        <div class="shipushanga">
          <p>
            店铺起送量
            <span>{{data.song}}</span>
          </p>
          <div></div>
          <p>配送费:￥{{data.pei}}</p>
          <div></div>
          <p>
            总销量:
            <span>{{data.zong}}</span>份
          </p>
        </div>
      </div>
      <div class="shipuzhong">
        <p>推荐理由:{{data.tuijian}}</p>
        <p>
          <span class="iconfont icon-xingxing1"></span>
          <span class="iconfont icon-xingxing1"></span>
          <span class="iconfont icon-xingxing1"></span>
          <span class="iconfont icon-xingxing1"></span>
          <span class="iconfont icon-xingxing"></span>
          推荐8分
        </p>
      </div>
      <div class="shipucharu">
        <p>下单时间:早餐:9.00之前订餐，午餐:12.00之前订餐，晚餐:16.00之前订餐</p>
      </div>
      <div class="shipuxia">
        <div class="shipuxiashang">
          <div>
            <h1 :class="flags?'yanse':''" @click="shipufang()">食谱</h1>
            <h1 :class="flaga?'yanse':''"  @click="shipufangs()">厨房</h1>
          </div>
          <div>
            <span class="iconfont icon-ai206"></span>
          </div>
        </div>
        <div>
          <SHIPU v-if="this.flags" />
          <CHUFANG v-if="this.flaga"  />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SHIPU from "./shipu/index.vue"
import CHUFANG from "./chufang/index.vue"

export default {
  name: "shican",
  components:{
    SHIPU,
    CHUFANG
  },
  data() {
    return {
      flag: false,
      data: {
        name: "PNPMART 精美早餐",
        price: "12.9-35.0",
        src: "http://pic26.photophoto.cn/20130225/0011024004066828_b.jpg",
        song: 30,
        pei: "2.00",
        zong: 5415,
        tuijian:
          "每一款都是精品，更有精品可期！来吧，给生活创造一个“盲”里偷闲的理由~"
      },
      flags:true,
      flaga:false
    };
  },
  methods: {
    tuantui() {
      this.$emit("tuantuis");
    },
    shipufang(){
      this.flags=true
      this.flaga=false
    },
    shipufangs(){
      this.flags=false
      this.flaga=true
    }
  },
  created() {
    // this.$store.commit("datalist",1);
    setTimeout(() => {
      this.flag = true;
    }, 20);
    // this.$store.commit("data_tuan",1);
  }
};
</script>

<style scoped>
@import url("../../../../../assets/fonts2/iconfont.css");
.tuancan {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  overflow-y: auto;
}
.shang {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.shang > span {
  margin-left: 10px;
}
.ding {
  width: 100%;
  height: 30px;
}
.ding img {
  width: 100%;
  height: 30px;
}
.tou {
  width: 100px;
  height: 30px;
  background: rgba(145, 145, 145);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: 10px;
}
.zhongjian {
  width: 1px;
  height: 60%;
  background: #fff;
}
.tupian {
  width: 100%;
  height: 150px;
  /* background-image: url(http://n.sinaimg.cn/sinacn21/290/w640h450/20180319/40ea-fyskeuc3864163.jpg);
    font-weight: bold;
    background-position: center; */
  position: relative;
  z-index: -1;
}
.tupian img {
  width: 100%;
  height: 100%;
}
.yiqing {
  width: 100%;
  height: 40px;
  background: blue;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  transition: all 1000ms;
}
.yiqings {
  width: 100%;
  height: 40px;
  background: blue;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, -40px);
  transition: all 1000ms;
}
.yiqing p {
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
}
.shipu {
  width: 100%;
  height: calc(100% - 200px);
  background: #fff;
  margin-top: -20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.shipushang {
  width: 92%;
  height: 100px;
  margin: 0 auto;
}
.shipushangs {
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: space-between;
}
.shipushangleft {
  height: 100%;
}
.shipushangleft p {
  width: 30px;
  height: 20px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: red;
  margin: 5px 0;
}
.shipushangleft h1 {
  font-size: 15px;
  line-height: 20px;
}
.yuan {
  color: red;
}
.shipushangright {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.shipushangright img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.shipushanga {
  width: 100%;
  height: 30%;
  display: flex;
  align-items: center;
}
.shipushanga p {
  font-size: 14px;
  margin-right: 10px;
}
.shipushanga p span {
  color: blue;
}
.shipushanga div {
  width: 1px;
  height: 15px;
  background: #ccc;
  margin-right: 10px;
}
.shipuzhong {
  width: 92%;
  height: 90px;
  margin: 0 auto;
  background: rgba(245, 245, 245);
  border-radius: 5px;
  padding-top: 10px;
}
.shipuzhong p {
  color: rgba(102, 102, 102);
  margin: 0 0 10px 10px;
}
.shipuzhong p span {
  color: red;
}
.icon-xingxing {
  margin-right: 45%;
}
.shipucharu {
  width: 92%;
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.shipucharu p {
  font-size: 15px;
  color: rgba(102, 102, 102);
}
.shipuxia {
  width: 100%;
  height: calc(100% - 260px);
  margin: 0 auto;
}
.shipuxiashang {
  width: 90%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.shipuxiashang div{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shipuxiashang div h1{
  font-size: 20px;
  font-weight: 400;
  margin-right: 20px;
}
.shipuxiashang div .yanse{
  color: blue;
  border-bottom: 3px solid blue;
}
</style>